<template>
    <div>
        <h1>用户管理</h1>
        <!--弹出式表单-->
        <el-button @click="dialogShow = true">添加</el-button>
        <el-dialog title="用户信息" :visible.sync="dialogShow">
            <div>
                账号：<input type="text" v-model="user.username"><br>
                密码：<input type="password" v-model="user.password"><br>
                昵称：<input type="text" v-model="user.nickname"><br>
                手机：<input type="text" v-model="user.telephone"><br>
                图片：<input type="text" v-model="user.icon"><br>
                <button @click="saveUser">保存</button>
            </div>
        </el-dialog>
        <!--数据表格-->
        <el-table stripe :data="users" style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="密码"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.password }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="昵称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="手机"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="照片"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.icon }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="editUser(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteUser(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页按钮-->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total" :page-size="size" :current-page="current" @current-change="loadUsers">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "UserView",
        data(){
            return {
                user:{"id":null,"username":"","password":"","nickname":"","telephone":"","icon":""},
                users:[], //用户列表
                current:1,
                total:0,
                size:5,
                pages:1,
                dialogShow: false //对话框显示
            }
        },
        methods:{
            //分页查询
            loadUsers(current){
                this.current = current;
                this.$http.get("/users-page?current=" + this.current + "&size=" + this.size)
                    .then(result => {
                        console.log(result.data);
                        this.users = result.data.data.records;
                        this.pages = result.data.data.pages;
                        this.total = result.data.data.total;
                    });
            },
            //保存用户
            saveUser(){
                console.log(this.user);
                //通过id是否为null，判断进行添加或更新
                if(this.user.id == null){
                    this.$http.post("/user",this.user)
                        .then(result => {
                            if(result.data.data == "ok"){
                                this.loadUsers(this.current);
                            }
                        });
                }else{
                    this.$http.put("/user",this.user)
                        .then(result => {
                            if(result.data.data == "ok"){
                                this.loadUsers(this.current);
                            }
                        });
                }
                //清空文本框
                this.user = {"id":null,"username":"","password":"","nickname":"","telephone":"","icon":""};
                this.dialogShow = false;
            },
            //点击用户进行显示
            editUser(user){
                this.user = JSON.parse(JSON.stringify(user));
                this.dialogShow = true;
            },
            deleteUser(id){
                this.$http.delete("/user/" + id)
                    .then(result => {
                        if(result.data.data == "ok"){
                            this.loadUsers(this.current);
                        }
                    })
            }
        },
        mounted() {
            this.loadUsers(1);
        }
    }
</script>

<style scoped>

</style>
